<template>
  <a-modal :open="open" width="1260px" title="统计类别明细" centered :footer="null" @cancel="onCancel">
    <div class="flex justify-between">
      <div class="w-7/12 flex justify-end mb-2">
        <a-button class="mr-2" @click="onPrint()">打印</a-button>
        <BaseExport
          type="报表"
          class="mr-2"
          name="门诊费用按类别统计明细"
          code="000841"
          is-show-time
          :search-params="{ ...props.formState, startDate: props.formState?.dateRange?.[0], endDate: props.formState?.dateRange?.[1], tjlbbh: rowData.tjlbbh }"
          >导出</BaseExport
        >
      </div>
      <div class="w-5/12 flex justify-end mb-2">
        <BaseExport
          type="报表"
          class="mr-2"
          name="门诊费用按类别统计患者信息"
          code="000842"
          is-show-time
          :search-params="{
            ...props.formState,
            startDate: props.formState?.dateRange?.[0],
            endDate: props.formState?.dateRange?.[1],
            bh: selectLeftRow.bh
          }"
          >导出</BaseExport
        >
      </div>
    </div>
    <div class="w-full flex justify-between">
      <div class="w-7/12 h-[620px] overflow-hidden">
        <BaseTable
          :loading="loading1"
          :height="520"
          :data-source="leftTableData"
          column-code="000841"
          :custom-row="(record) => ({ onClick: () => onSelectRow(record) })"
          :row-class-name="(record) => (record.bh === selectLeftRow.bh ? 'selected-row' : '')"
          :scroll="{ x: 780 }"
        >
          <template #bodyCell="{ column, index, record }">
            <template v-if="column.dataIndex === 'xh'">
              {{ index + 1 }}
            </template>
            <template v-if="column.dataIndex === 'mc'">
              <MedicineInfo :value="{ mc: record.mc, gg: record.gg, cj: record.cj }" />
            </template>
          </template>
          <template #summary>
            <a-table-summary fixed>
              <a-table-summary-row>
                <a-table-summary-cell />
                <a-table-summary-cell>合计</a-table-summary-cell>
                <a-table-summary-cell class="text-right">
                  <a-typography-text>-</a-typography-text>
                </a-table-summary-cell>
                <a-table-summary-cell class="text-right">
                  <a-typography-text>{{ amountTatol.sl }}</a-typography-text>
                </a-table-summary-cell>
                <a-table-summary-cell class="text-left">
                  <a-typography-text>-</a-typography-text>
                </a-table-summary-cell>
                <a-table-summary-cell class="text-right">
                  <a-typography-text>{{ formatAmount(amountTatol.zje, 2) }}</a-typography-text>
                </a-table-summary-cell>
                <a-table-summary-cell class="text-right">
                  <a-typography-text>{{ formatAmount(amountTatol.ybje, 2) }}</a-typography-text>
                </a-table-summary-cell>
                <a-table-summary-cell class="text-right">
                  <a-typography-text>{{ formatAmount(amountTatol.zfje, 2) }}</a-typography-text>
                </a-table-summary-cell>
                <a-table-summary-cell class="text-left">
                  <a-typography-text>-</a-typography-text>
                </a-table-summary-cell>
              </a-table-summary-row>
            </a-table-summary>
          </template>
        </BaseTable>
      </div>
      <div class="w-5/12 ml-4 h-[620px] overflow-y-auto">
        <BaseTable :loading="loading2" :height="520" :data-source="rightTableData" column-code="000842" :pagination="paginationright" :scroll="{ x: 300 }">
          <template #bodyCell="{ column, index, record }">
            <template v-if="column.dataIndex === 'xh'">
              {{ index + 1 }}
            </template>
            <template v-if="column.dataIndex === 'brName'">
              <MedicineInfo :value="{ mc: record.brName, gg: record.brXb, cj: record.brAge }" />
            </template>
          </template>
        </BaseTable>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
// import { post } from '@/utils/request'
import BaseTable from '@/components/BaseTable'
import { formatAmount } from '@/utils/format.js'

const emit = defineEmits(['update:open', 'ok'])

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  formState: {
    type: Object,
    default: () => ({})
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})

const selectLeftRow = ref({})

const onCancel = () => {
  emit('update:open', false)
}
const {
  loading: loading1,
  tableData: leftTableData,
  getData: getLeftData
} = useTable({
  url: '/statistic/getCategoryStatisticsDetails',
  params: props.formState,
  pagination: false,
  immediate: false,
  formatParams: (params) => {
    return {
      ...params,
      startDate: params?.dateRange?.[0],
      endDate: params?.dateRange?.[1],
      tjlbbh: props.rowData.tjlbbh
    }
  }
})
const onSelectRow = (select) => {
  selectLeftRow.value = select
  getRightData()
}

const {
  loading: loading2,
  tableData: rightTableData,
  getData: getRightData,
  pagination: paginationright
} = useTable({
  url: '/statistic/getCategoryStatisticsDetailsBr',
  params: props.formState,
  pagination: true,
  immediate: false,
  formatParams: (params) => {
    return {
      ...params,
      startDate: params?.dateRange?.[0],
      endDate: params?.dateRange?.[1],
      bh: selectLeftRow.value.bh
    }
  }
})
const amountTatol = ref({})
const getAmount = async () => {
  const res = await post('/statistic/getCategoryStatisticsDetailsTj', {
    startDate: props.formState?.dateRange?.[0],
    endDate: props.formState?.dateRange?.[1],
    tjlbbh: props.rowData.tjlbbh
  })
  if (res.code === 0) {
    amountTatol.value = res.data
  }
}
//打印
const onPrint = async () => {
  const { code, msg, data } = await post('/statistic/printCategoryStatisticsMx', {
    startDate: props.formState?.dateRange?.[0],
    endDate: props.formState?.dateRange?.[1],
    tjlbbh: props.rowData.tjlbbh
  })
  if (code !== 0) return message.error(msg)
  window.openExe?.rpt(data) //调用winform打印
}
watch(
  () => props.open,
  (val) => {
    if (val) {
      getLeftData()
      getAmount()
      rightTableData.value = []
    }
  }
)
</script>
<style lang="less" scoped>
.right-border-pro {
  border: 1px solid var(--primary-color);
  border-radius: 4px;
}
.patient-info-header {
  background-color: var(--primary-color);
  border-radius: 3px;
}
</style>
